<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML表格</title>
</head>
<body>
  <h3>1.无表头的表格</h3>
  <table border="1">
    <tr>
      <td>第1行1列</td>
      <td>第1行2列</td>
      <td>第1行3列</td>
    </tr>
    <tr>
      <td>第2行1列</td>
      <td>第2行2列</td>
      <td>第2行3列</td>
    </tr>
    <tr>
      <td>第3行1列</td>
      <td>第3行2列</td>
      <td>第3行3列</td>
    </tr>
    <tr>
      <td>第4行1列</td>
      <td>第4行2列</td>
      <td>第4行3列</td>
    </tr>
    <tr>
      <td>第5行1列</td>
      <td>第5行2列</td>
      <td>第5行3列</td>
    </tr>
  </table>
  <h3>2.有表头的表格</h3>
  <table border="1">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
    <tr>
      <td>第1行1列ffff</td>
      <td>第1行2列</td>
      <td>第1行3列</td>
    </tr>
    <tr>
      <td>第2行1列</td>
      <td>第2行2列</td>
      <td>第2行3列</td>
    </tr>
    <tr>
      <td>第3行1列</td>
      <td>第3行2列</td>
      <td>第3行3列</td>
    </tr>
    <tr>
      <td>第4行1列</td>
      <td>第4行2列</td>
      <td>第4行3列</td>
    </tr>
    <tr>
      <td>第5行1列</td>
      <td>第5行2列</td>
      <td>第5行3列</td>
    </tr>
  </table>
  <h3>3.有标题的表格</h3>
  <table border="1">
    <caption>我是表格标题</caption>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
    <tr>
      <td>第1行1列</td>
      <td>第1行2列</td>
      <td>第1行3列</td>
    </tr>
    <tr>
      <td>第2行1列</td>
      <td>第2行2列</td>
      <td>第2行3列</td>
    </tr>
    <tr>
      <td>第3行1列</td>
      <td>第3行2列</td>
      <td>第3行3列</td>
    </tr>
    <tr>
      <td>第4行1列</td>
      <td>第4行2列</td>
      <td>第4行3列</td>
    </tr>
    <tr>
      <td>第5行1列</td>
      <td>第5行2列</td>
      <td>第5行3列</td>
    </tr>
  </table>
  <h3>4.定义每一列的样式</h3>
  <table border="1">
    <caption>我是表格标题</caption>
    <colgroup>
      <col span="1" style="background-color: yellow;">
      <col span="2" style="background-color: bisque;">
    </colgroup>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
    <tr>
      <td>第1行1列</td>
      <td>第1行2列</td>
      <td>第1行3列</td>
    </tr>
    <tr>
      <td>第2行1列</td>
      <td>第2行2列</td>
      <td>第2行3列</td>
    </tr>
    <tr>
      <td>第3行1列</td>
      <td>第3行2列</td>
      <td>第3行3列</td>
    </tr>
    <tr>
      <td>第4行1列</td>
      <td>第4行2列</td>
      <td>第4行3列</td>
    </tr>
    <tr>
      <td>第5行1列</td>
      <td>第5行2列</td>
      <td>第5行3列</td>
    </tr>
  </table>
  <h3>5.增加页眉、主体、页脚</h3>
  <table border="1">
    <caption>我是表格标题</caption>
    <colgroup>
      <col span="1" style="background-color: yellow;">
      <col span="2" style="background-color: bisque;">
    </colgroup>
    <thead><!--我是页眉-->
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody><!--我是主体-->
      <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
        <td>第1行3列</td>
      </tr>
      <tr>
        <td>第2行1列</td>
        <td>第2行2列</td>
        <td>第2行3列</td>
      </tr>
      <tr>
        <td>第3行1列</td>
        <td>第3行2列</td>
        <td>第3行3列</td>
      </tr>
      <tr>
        <td>第4行1列</td>
        <td>第4行2列</td>
        <td>第4行3列</td>
      </tr>
    </tbody>
    <tfoot><!--我是页脚-->
      <tr>
        <td>第5行1列</td>
        <td>第5行2列</td>
        <td>第5行3列</td>
      </tr>
    </tfoot>
  </table>
  <h3>6.合并单元格列</h3>
  <table border="1">
    <caption>我是表格标题</caption>
    <colgroup>
      <col span="1" style="background-color: yellow;">
      <col span="2" style="background-color: bisque;">
    </colgroup>
    <thead><!--我是页眉-->
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody><!--我是主体-->
      <tr>
        <td>第1行1列</td>
        <td colspan="2">第1行2列</td>
      </tr>
      <tr>
        <td colspan="3">第2行1列</td>
      </tr>
      <tr>
        <td>第3行1列</td>
        <td>第3行2列</td>
        <td>第3行3列</td>
      </tr>
      <tr>
        <td>第4行1列</td>
        <td>第4行2列</td>
        <td>第4行3列</td>
      </tr>
    </tbody>
    <tfoot><!--我是页脚-->
      <tr>
        <td>第5行1列</td>
        <td>第5行2列</td>
        <td>第5行3列</td>
      </tr>
    </tfoot>
  </table>
  <h3>7.合并单元格行</h3>
  <table border="1">
    <caption>我是表格标题</caption>
    <colgroup>
      <col span="1" style="background-color: yellow;">
      <col span="2" style="background-color: bisque;">
    </colgroup>
    <thead><!--我是页眉-->
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody><!--我是主体-->
      <tr>
        <td>第1行1列</td>
        <td colspan="2">第1行2列</td>
      </tr>
      <tr>
        <td colspan="3">第2行1列</td>
      </tr>
      <tr>
        <td rowspan="3">第3行1列</td>
        <td>第3行2列</td>
        <td>第3行3列</td>
      </tr>
      <tr>
        <td>第4行2列</td>
        <td>第4行3列</td>
      </tr>
      <tr>
        <td>第5行2列</td>
        <td>第5行3列</td>
      </tr>
    </tbody>
    <tfoot><!--我是页脚-->
      <tr>
        <td>最后一行1列</td>
        <td>最后一行2列</td>
        <td>最后一行3列</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>